<template>
  <div class="container">
    <div class="app-container">
      <div class="el-card is-never-shadow">
        <div class="btn_wrapper">
          <span>说明：目前支持学科和关键字条件筛选</span>
          <el-button
            type="success"
            icon="el-icon-edit"
            size="small"
            @click="$router.push('new')"
            >新增试题</el-button
          >
        </div>
        <el-form
          ref="form"
          :model="form"
          label-width="80px"
          label-position="right"
        >
          <!-- 学科 -->
          <el-row :gutter="10" class="row" style="height: 50px">
            <el-col :span="6"
              ><div class="grid-content bg-purple">
                <el-form-item label="学科" prop="subjectID">
                  <el-select
                    v-model="form.subjectID"
                    placeholder="请选择"
                    @change="setCatalogID"
                  >
                    <el-option
                      :label="item.label"
                      :value="item.value"
                      v-for="item in subjectID"
                      :key="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>

            <!-- 二级目录 -->
            <el-col :span="6"
              ><div class="grid-content bg-purple-light">
                <el-form-item label="二级目录" prop="catalogID">
                  <el-select v-model="form.catalogID" placeholder="请选择">
                    <el-option
                      :label="item.directoryName"
                      :value="item.directoryName"
                      v-for="item in catalogID"
                      :key="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>

            <!-- 标签 -->
            <el-col :span="6"
              ><div class="grid-content bg-purple">
                <el-form-item label="标签" prop="tags">
                  <el-select v-model="form.tags" placeholder="请选择">
                    <el-option
                      :label="item.tagName"
                      :value="item.id"
                      v-for="item in tags"
                      :key="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>

            <!-- 关键字 -->
            <el-col :span="6"
              ><div class="grid-content bg-purple-light">
                <el-form-item label="关键字" prop="keyword">
                  <el-input
                    v-model="form.keyword"
                    autocomplete="off"
                    placeholder="根据题干搜索"
                  ></el-input>
                </el-form-item></div
            ></el-col>
          </el-row>
          <el-row :gutter="10" class="row" style="height: 50px">
            <!-- 试题类型 -->
            <el-col :span="6"
              ><div class="grid-content bg-purple">
                <el-form-item label="试题类型" prop="questionType">
                  <el-select v-model="form.questionType" placeholder="请选择">
                    <el-option
                      :label="item.label"
                      :value="item.value"
                      v-for="(item, index) in questionType"
                      :key="index"
                    ></el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>

            <!-- 难度 -->
            <el-col :span="6"
              ><div class="grid-content bg-purple-light">
                <el-form-item label="难度" prop="difficulty">
                  <el-select v-model="form.difficulty" placeholder="请选择">
                    <el-option
                      :label="item.label"
                      :value="item.value"
                      v-for="(item, index) in difficulty"
                      :key="index"
                    ></el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>

            <!-- 方向 -->
            <el-col :span="6"
              ><div class="grid-content bg-purple">
                <el-form-item label="方向" prop="direction">
                  <el-select v-model="form.direction" placeholder="请选择">
                    <el-option
                      :value="item"
                      v-for="(item, index) in direction"
                      :key="index"
                    ></el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>

            <!-- 录入人 -->
            <el-col :span="6"
              ><div class="grid-content bg-purple-light">
                <el-form-item label="录入人" prop="creatorID">
                  <el-select v-model="form.creatorID" placeholder="请选择">
                    <el-option
                      :label="item.username"
                      :value="item.id"
                      v-for="item in creatorID"
                      :key="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
          </el-row>
          <el-row :gutter="10" class="row" style="height: 50px">
            <!-- 题目备注 -->
            <el-col :span="6"
              ><div class="grid-content bg-purple">
                <el-form-item label="题目备注" prop="remarks">
                  <el-input v-model="form.remarks"></el-input>
                </el-form-item></div
            ></el-col>

            <!-- 企业简称 -->
            <el-col :span="6"
              ><div class="grid-content bg-purple-light">
                <el-form-item label="企业简称" prop="shortName">
                  <el-input v-model="form.shortName"></el-input>
                </el-form-item></div
            ></el-col>

            <!-- 城市 -->
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="城市">
                  <el-row type="flex" justify="space-between">
                    <el-col :span="11">
                      <el-form-item prop="province">
                        <el-select
                          v-model="form.province"
                          placeholder="请选择"
                          @change="setCity"
                        >
                          <el-option
                            v-for="(item, index) in cityChoice.city"
                            :key="index"
                            :value="item"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="11">
                      <el-form-item prop="city">
                        <el-select v-model="form.city" placeholder="请选择">
                          <el-option
                            v-for="(item, index) in cityChoice.citys"
                            :key="index"
                            :value="item"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6"
              ><div class="grid-content bg-purple-light">
                <el-form-item class="form-search-btn">
                  <el-button size="mini" @click="resetForm">清空</el-button>
                  <el-button type="primary" size="mini" @click="onSearch"
                    >搜索</el-button
                  >
                </el-form-item>
              </div></el-col
            >
          </el-row>
        </el-form>
        <el-row>
          <el-col :span="24">
            <el-tabs v-model="tabs" type="card" @tab-click="handleClick">
              <el-tab-pane label="全部" name='3'></el-tab-pane>
              <el-tab-pane label="待审核" name="0"></el-tab-pane>
              <el-tab-pane label="已审核" name="1"></el-tab-pane>
              <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>

        <el-alert type="info" show-icon :closable="false">
          <template #title>数据一共{{ counts }}条</template>
        </el-alert>
        <Table
          v-model="questionsChoice"
          :list="list"
          @render="choice"
          @previewShow="openPreview"
          operation="choice"
          @toExamineShow="openToExamine"
        ></Table>
        <el-row type="flex" class="row-bg" justify="end">
          <el-pagination
            style="margin-top: 20px; margin-bottom: 15px"
            background
            :page-sizes="[5, 10, 20, 30]"
            :page-size="5"
            layout="prev, pager, next, sizes,jumper"
            :total="counts"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.page"
          >
          </el-pagination>
        </el-row>
      </div>
    </div>
    <QuestionsPreview
      :isShow.sync="previewShow"
      :details="details"
      v-if="previewShow"
    ></QuestionsPreview>
    <el-dialog
      title="收货地址"
      :visible.sync="toExamineShow"
      width="21%"
      :before-close="isShut"
    >
      <el-form
        ref="toExamineForm"
        :model="toExamineForm"
        :rules="toExamineRules"
      >
        <el-form-item>
          <el-radio-group v-model="toExamineForm.chkState">
            <el-radio label="1">通过</el-radio>
            <el-radio label="2">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="chkRemarks">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="toExamineForm.chkRemarks"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="end" slot="footer" class="dialog-footer">
        <el-button @click="isShut">取 消</el-button>
        <el-button type="primary" @click="isOk">确 定</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { provinces, citys } from '@/api/hmmm/citys'
import { difficulty, questionType, direction } from '@/api/hmmm/constants' // 难度
import { list } from '@/api/base/users'
import { simple } from '@/api/hmmm/subjects'
import { list as directorysList } from '@/api/hmmm/directorys'
import { list as tagsList } from '@/api/hmmm/tags'// 标签
import { choice, detail, choiceCheck } from '@/api/hmmm/questions'// 精选题库列表
import { questionsChoice } from '@/module-hmmm/components/huojieComponents/enumeration'
import Table from '@/module-hmmm/components/huojieComponents/table.vue'
import QuestionsPreview from '@/module-hmmm/components/huojieComponents/questions-preview.vue'
export default {
  name: 'choice',
  components: {
    Table,
    QuestionsPreview
  },
  data () {
    const validatechkRemarks = (rule, value, callback) => {
      console.log(value)
      if (value === '') {
        this.$message.warning('请输入审核意见')
      } else {
        callback()
      }
    }
    return {
      tabs: '3',
      previewShow: false,
      toExamineShow: false,
      form: {
        subjectID: null, // 学科
        difficulty: null, // 难度
        questionType: null, // 试题类型
        tags: null, // 标签名称
        province: null, // 企业所在地省份
        city: null, // 企业所在城市
        keyword: null, // 关键字
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        direction: null, // 方向
        creatorID: null, // 录入人
        catalogID: null, // 目录
        chkState: null // 审核状态

      },
      toExamineForm: {
        chkState: '1',
        chkRemarks: ''
      },
      toExamineRules: {
        chkRemarks: [
          { validator: validatechkRemarks, trigger: 'blur' }
        ]
      },
      toExamineid: {},
      formRecord: {},
      subjectID: [], // 学科
      catalogID: [], // 目录
      tags: [], // 标签名称
      difficulty: [], // 难度
      questionType: [], // 试题类型
      direction: [], // 方向
      creatorID: [], // 录入人
      // 城市
      cityChoice: {
        // 所有城市
        city: [],
        // 城市下地区
        citys: []
      },
      // 页码
      page: {
        page: 1,
        pagesize: 5
      },
      // list总数
      counts: 0,
      // 列表数据
      list: [],
      questionsChoice // 枚举表头
    }
  },
  created () {
    // 获取城市信息
    this.cityChoice.city = provinces()
    // 获取学科
    this.getSubjectList()
    // 获取难度
    this.difficulty = difficulty
    // 获取试题类型
    this.questionType = questionType
    // 获取试题类型
    this.direction = direction
    // 渲染录入人
    this.getUsersList()
    this.choice()
  },
  methods: {
    async openPreview (row) {
      const { data } = await detail(row)
      this.details = data
      this.previewShow = true
    },
    handleClick () {
      if (this.tabs === '3') {
        this.choice()
      } else {
        this.choice(this.tabs)
      }
    },
    // 渲染列表
    async choice (tabs = null) {
      const { data } = await choice({ ...this.page, ...this.formRecord, chkState: tabs })
      this.counts = data.counts
      this.list = data.items
    },
    // // 每页几条数据
    handleSizeChange (val) {
      this.page.pagesize = val
    },
    handleCurrentChange (val) {
      this.page.page = val
      this.choice()
    },
    // 搜索formRecord
    onSearch () {
      this.page = {
        page: 1,
        pagesize: 5
      }
      Object.keys(this.form).forEach(item => {
        this.formRecord[item] = this.form[item]
      })
      this.choice()
    },
    // 城市下地区
    setCity (val) {
      this.cityChoice.citys = citys(val)
    },
    // 渲染学科
    getSubjectList () {
      simple()
        .then((res) => {
          this.subjectID = res.data
        })
        .catch(() => {
          this.$message('获取学科失败')
        })
    },

    // 渲染二级目录和标签
    setCatalogID (val) {
      directorysList({
        subjectID: val
      }).then(res => { this.catalogID = res.data.items })
      tagsList({ subjectID: val }).then(res => { this.tags = res.data.items })
    },
    // 渲染录入人
    getUsersList () {
      list().then(res => {
        this.creatorID = res.data.list
      }).catch(err => {
        console.log(err)
      })
    },
    // 清空
    resetForm () {
      this.$refs.form.resetFields()
      this.form = {
        subjectID: null, // 学科
        difficulty: null, // 难度
        questionType: null, // 试题类型
        tags: null, // 标签名称
        province: null, // 企业所在地省份
        city: null, // 企业所在城市
        keyword: null, // 关键字
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        direction: null, // 方向
        creatorID: null, // 录入人
        catalogID: null // 目录
      }
    },
    openToExamine (data) {
      this.toExamineShow = true
      this.toExamineid.id = data.id
    },
    async isOk () {
      try {
        await this.$refs.toExamineForm.validate()
        this.toExamineForm.chkState *= 1
        await choiceCheck({ ...this.toExamineForm, ...this.toExamineid })
        this.$message.success('操作成功')
        this.choice()
        this.isShut()
      } catch (error) {
        console.log(error)
      }
    },
    isShut () {
      this.toExamineShow = false
      this.toExamineForm = {
        chkState: '1',
        chkRemarks: ''
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  padding: 0 10px;
  margin: 10px 0;
}
.el-card {
  padding: 20px;
}
::v-deep.el-select {
  width: 100%;
  .el-input {
    .el-input__inner {
      line-height: 30px;
      height: 30px;
    }
  }
}
.el-input {
  ::v-deep .el-input__inner {
    line-height: 30px;
    height: 30px;
  }
}
// .el-col {
//   margin-bottom: 18px;
// }
.el-form-item__label {
  font-size: 14px !important;
}
</style>

<style scoped lang='scss'>
.app-container {
  padding: 0 !important;
  .btn_wrapper {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 37.5px;
    margin-bottom: 15px;
    span {
      font-size: 12px;
      color: pink;
    }
  }
  .form-search-btn {
    display: flex;
    justify-content: right;
  }
}
</style>
